<template>
  <div class="header">
    <span class="user">{{user.nickname ? user.nickname : user.mobile}}</span>
    <img class="avatar" :src="user.face" alt @click="handleClick">
  </div>
</template>

<script>
export default {
  props: ["user"],
  methods: {
    handleClick() {
      this.$emit('handleClick')
    }
  },
};
</script>

<style lang="less" scoped>
.header {
    padding: 10vw 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(0, 143, 239);
    .user {
        font-size: 5vw;
        color: #fff;
    }
  .avatar {
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
  }
}
</style>